<!DOCTYPE html>
<html>
  <head>
    <title>WebSocket Client</title>
  </head>
  <body>
    <h1>WebSocket Client</h1>
    <div><button onclick="javascript:up()">UP</button></div>
    <div></div><button onclick="javascript:left()">LEFT</button>
    <button onclick="javascript:right()">RIGHT</button></div>
    <div><button onclick="javascript:down()">DOWN</button></div>
    <div id="output"></div>

    <script>
      // 创建 WebSocket 连接
     var socket = new WebSocket("ws://192.168.31.78:8080/websocket");

     //var socket = new WebSocket("ws://192.168.31.78:8080");

      // 监听连接打开事件
      socket.onopen = function (event) {
        console.log("WebSocket connected");
      };

      // 监听接收到消息事件
      socket.onmessage = function (event) {
        var data = event.data;
        console.log("Received data: " + data);
        var outputDiv = document.getElementById("output");
        outputDiv.innerHTML += "<p>" + data + "</p>";
      };

      // 监听连接关闭事件
      socket.onclose = function (event) {
        console.log("WebSocket disconnected");
      };

      // 监听连接错误事件
      socket.onerror = function (error) {
        console.error("WebSocket error: " + error);
      };

      // 向服务器发送消息
      function sendMessage(s) {
        
        socket.send(s);
      }

      function up(){
         sendMessage("U")
      }
      function down(){
         sendMessage("D")
      }

      function left(){
         sendMessage("L")
      }

      function right(){
         sendMessage("R")
      }

      
    </script>
  </body>
</html>
